<template>
  <div
    :class="'candlertick-wrap ' + wrapId"
    :key="wrapId"
    :id="wrapId"
    :ref="wrapId"
    :style="{ height: height, width: width }">
    <div :id="id" :ref="id" :class="'chart ' + className" />
    <div ref="menuuu" class="right-menu-wrap" onMouseLeave="this.style.display='none';" style="display:none">
      <ul>
        <li class="item tc" @click.stop="rightItemClickHandle('index')">
          指数平滑
        </li>
        <li class="item tc" @click.stop="rightItemClickHandle('xbsj')">
          小波神经网络
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { merge, isFunction, isPlainObject, isArray, concat, has } from 'lodash'
import chartResize from '@/mixins/chartResize'

export default {
  mixins: [chartResize],
  props: {
    className: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: 'candlertick'
    },
    options: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object
    },
    fetchData: {
      type: Function
    },
    collapseIcon: {
      type: Boolean
    }
  },
  data() {
    return {
      chart: null,
      selectedData: null
    }
  },
  computed: {
    wrapId() {
      return this.id + '-chart'
    }
  },
  mounted() {
    const that = this
    this.chart = echarts.init(document.getElementById(this.id), 'echartstheme')
    this.chart.on('click', function(params) {
      that.$emit('clickSeries', params)
    })
    this.chart.on('dblclick', function(params) {
      that.$emit('dblclickSeries', params)
    })
    this.chart.on('datazoom', function(params) {
      that.$emit('datazoom', params, this.chart)
    })
    this.chart.on('contextmenu', function(params) {
      const flag = has(that._events, 'contextmenu')
      if (flag) {
        that.selectedData = params
        that.rightBt(params)
      }
    })
    this.initChart()
    if (isFunction(this.fetchData)) {
      this.getMapData()
    }
  },
  watch: {
    chartData() {
      this.chartRest()
      this.$nextTick(() => {
        this.chart.resize()
      })
    },
    collapseIcon() {
      this.chart.resize()
    }
  },
  beforeDestroy() {
    const { chart } = this
    if (!chart) {
      return
    }
    chart.off('click')
    chart.off('datazoom')
    chart.dispose()
    this.chart = null
  },
  methods: {
    showLoading() {
      this.chart.showLoading({
        text: '图表生成中,请稍后。。。',
        color: '#2d8cf0',
        textColor: '#2d8cf0',
        maskColor: 'rgba(33, 40, 72,.9)',
        zlevel: 10
      })
    },
    chartRest() {
      this.chart.clear()
      this.chart.hideLoading()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    initChart() {
      const { categoryData = [], values, lineList = [], actualGas = [], otherSeiesData = [] } = this.chartData

      let seriesData = []
      let markData = []
      if (isPlainObject(values)) {
        const { data = [], markPointData = [] } = values
        seriesData = data
        markData = markPointData
      } else if (isArray(values)) {
        seriesData = values
      }

      this.chart.setOption(
        merge(
          {
            backgroundColor: '#1c213e',
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              data: categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#31597d'
                }
              },
              splitNumber: 20,
              min: 'dataMin',
              max: 'dataMax',
              splitLine: {
                show: false
              }
            },
            yAxis: {
              scale: true,
              splitArea: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: '#31597d',
                  type: 'dashed'
                }
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#31597d'
                }
              }
            },
            dataZoom: [
              {
                type: 'inside',
                start: 50,
                end: 100
              },
              {
                show: true,
                type: 'slider',
                top: '90%',
                start: 50,
                end: 100,
                height: 20
              }
            ],
            series: concat(
              [
                {
                  type: 'candlestick',
                  roam: true,
                  data: seriesData,
                  markPoint: {
                    data: markData
                  },
                  itemStyle: {
                    color0: '#ec0000',
                    borderColo0: '#8A0000',
                    color: '#00da3c',
                    borderColor: '#008F28'
                  }
                },
                {
                  name: '起始值',
                  type: 'line',
                  data: lineList[0],
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5
                  }
                },
                {
                  name: '结束值',
                  type: 'line',
                  data: lineList[1],
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5
                  }
                },
                {
                  name: '每日用气量',
                  type: 'line',
                  data: actualGas,
                  yAxisIndex: 1,
                  smooth: true
                }
              ],
              otherSeiesData
            ),
            grid: {
              left: '5%',
              right: '5%',
              bottom: '15%'
            }
          },
          this.options
        ),
        true
      )
    },
    /**
     * 获取图表数据
     * @return {[type]} [description]
     */
    getMapData() {
      this.showLoading()
      this.fetchData()
    },
    /**
     * @name: rightBt
     * @test: test font
     * @msg: 右键功能
     * @param {type}
     * @return:
     */
    rightBt(params) {
      const { event } = params
      const menu = this.$refs.menuuu
      const pageX = event.event.clientX
      const pageY = event.event.clientY
      menu.style.left = pageX - 2 + 'px'
      menu.style.top = pageY - 2 + 'px'
      menu.style.display = 'block'
    },
    /**
     * @name: rightItemClickHandle
     * @test: test font
     * @msg: 右键选项点击
     * @param {type}
     * @return:
     */
    rightItemClickHandle(type) {
      this.$emit('contextmenu', this.selectedData, type)
      const menu = this.$refs.menuuu
      menu.style.display = 'none'
    }
  }
}
</script>
<style lang="less" scoped>
.candlertick-wrap {
  .chart {
    width: 100%;
    height: 100%;
  }
}
.right-menu-wrap {
  position: fixed;
  width: 100px;
  border-bottom: 0 !important;
  z-index: 99;

  .item {
    padding: 4px 0;
    cursor: pointer;
  }
}
</style>
